<template>
  <div class="recommend-card">
    <card-item
      v-for="item in recommends"
      :key="item.id"
      :item="item"
      v-bind="configObj"
      cardType="anchor"
    >
      <template #musictop>
        <span class="top">{{ item.category }}</span>
        <div class="botm" :style="{ bottom: btom + 'px' }">
          <slot name="botm-text" :item="item">
            <el-icon color="#fff" class="botm-ser-ico"><service /></el-icon
            >{{ item.subCount }}
          </slot>
        </div>
      </template>
      <template #musicBtm>
        <div class="talk">{{ item.rcmdtext || item.copywriter }}</div>
        <div class="c-user" v-if="userImgShow">
          <a href="#">
            <img
              :src="$filters.formatImgSize(item.dj.avatarUrl, 30)"
              alt="404"
              class="u-img"
            />
          </a>
          <a href="#" class="nickname">{{ item.dj.nickname }}</a>
        </div>
      </template>
    </card-item>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import CardItem from '@/base-ui/card-item'
const props = defineProps({
  recommends: {
    type: Object,
    required: true
  },
  configObj: {
    type: Object,
    required: true
  },
  userImgShow: {
    type: Boolean,
    default: true
  },
  btom: {
    type: Number,
    default: 9
  }
})
</script>

<style scoped lang="less">
.recommend-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .talk {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    margin: 8px 0;
  }
  .c-user {
    font-size: 12px;
    width: 100%;

    .u-img {
      width: 20px;
      height: 20px;
      border-radius: 50%;
    }

    .nickname {
      vertical-align: middle;
      position: relative;
      top: -8px;
      color: red;
    }
  }

  .top {
    position: absolute;
    top: 0;
    left: 0;
    background: #ff2c55;
    color: rgba(255, 255, 255, 0.9);
    border-bottom-right-radius: 7px;
    font-size: 12px;
    padding-bottom: 3px;
    padding-top: 0px;
    padding-right: 12px;
  }
  .botm {
    width: 100%;
    position: absolute;
    bottom: 9px;
    left: 2px;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.02)
    );
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    padding-right: 10px;

    .botm-ser-ico {
      top: 2px;
      padding-right: 2px;
    }
  }
}
</style>
